<template>
<uni-shadow-root class="partials-mofang-index"><view v-if="items">
    <view style="padding:0;">
    <view class="mofang_templete" :style="'height:'+(750/width*height)+'rpx;'">
      <view v-for="(item,index) in (items)" :key="item.index" class="mofang_item" :style="'left:'+((item.startPointX>item.endPointX?item.endPointX:item.startPointX)*750/width)+'rpx;top:'+((item.startPointY>item.endPointY?item.endPointY:item.startPointY)*750/width)+'rpx;width:'+((publicFun.toAbs(item.endPointX-item.startPointX)+1)*750/width)+'rpx;height:'+((publicFun.toAbs(item.endPointY-item.startPointY)+1)*750/width)+'rpx;'">
        <image mode="scaleToFill" :src="item.imageUrl" :data-link="item.linkUrl" @click="tolinkUrl" :style="'border-radius: '+(item.borderRadius)+'px;width:100%;height:100%;padding:'+(imagePadding)+'rpx;box-sizing:border-box'"></image> 
     </view>
    </view>
    </view>
</view></uni-shadow-root>
</template>
<wxs src="../../public/publicFun.wxs" module="publicFun"></wxs>
<script>

global['__wxVueOptions'] = {components:{}}

global['__wxRoute'] = 'partials/mofang/index'
const app = getApp()
Component({
  properties: {
    receiveData: {
      type: JSON,
    },
  },
  data: {
      items:null,
      width:'',
      height:'',
      imagePadding:''
  },
  ready:function(){
    console.log('=====ready-MoFang====', this.data.receiveData)
    this.setData({ 
        items: this.data.receiveData.jsonData.items || [],
        width: Number(this.data.receiveData.jsonData.width)||0,
        height: Number(this.data.receiveData.jsonData.height) || 0,
        imagePadding: Number(this.data.receiveData.jsonData.imagePadding) || 0
    })
    console.log('=====MoFang-width-height-imagePadding====', this.data.width,this.data.height,this.data.imagePadding)
  },
  methods: {
    tolinkUrl: function (e) {
      let linkUrl = e.currentTarget.dataset.link
      app.globalData.linkEvent(linkUrl)
    }
  }
})
export default global['__wxComponents']['partials/mofang/index']
</script>
<style platform="mp-weixin">
.mofang_templete{
    background: #fff;
    position:relative
}
.mofang_item{
    position:absolute;
    overflow:hidden;
}
</style>